import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from "../views/Login"
import Index from "../views/Index";
import Menu from "../views/sys/Menu";
import Role from "../views/sys/Role";
import User from "../views/sys/User";
import UserCenter from "../views/UserCenter";
import axios from "axios";
import store from "../store";
import Apply from "../views/Apply";
import Zc from "../views/sys/Zc"

Vue.use(VueRouter)

// 路由1
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
        //子路由
        children: [
            {
                path: '/index',
                name: 'Index',
                component: Index
            },
            {
                path: '/userCenter',
                name: 'UserCenter',
                meta: {
                    title: "个人中心"
                },
                //懒加载
                component: () => import('@/views/UserCenter.vue')
            },
            {
                path: '/sys/user',
                name: 'User',
                component: User

            },
            {
                path:'/sys/zc',
                name:'Zc',
                component: Zc
            }
            // {
            //   path: '/sys/roles',
            //   name: 'SysRole',
            //   component: Role
            // },
            // {
            //   path: '/sys/menus',
            //   name: 'SysMenu',
            //   component: Menu
            // }
        ]
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/apply',
        name: 'Apply',
        component: Apply
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

//路由拦截
router.beforeEach((to, from, next) => {

    let hasRoute = store.state.menus.hasRoute
    //判断当前菜单是否已有路由
    if (!hasRoute) {
        // 获取菜单信息
        axios.get('/sys/menu/nav', {
            headers: {
                Authorization: localStorage.getItem('token')
            }
        }).then(res => {
            //获取菜单信息
            store.commit("setMenuList", res.data.data.nav)
            //获取用户操作权限
            store.commit("setPermList", res.data.data.authoritys)
            //动态绑定路由
            let newRoutes = router.options.routes
            //循环遍历菜单信息
            res.data.data.nav.forEach(menu => {
                //菜单头没有路由判断菜单下有没有子菜单
                if (menu.children != null) {
                    //循环遍历子菜单
                    menu.children.forEach(e => {
                        //转换路由
                        let rout = menuToRoute(e)

                        if (rout) {
                            newRoutes[0].children.push(rout)
                        }
                    })
                }
            })
            router.addRoutes(newRoutes)
            hasRoute = true
            store.commit('checkRouteStatus', hasRoute)
        })
    }
    next()
})
//菜单转换路由方法
const menuToRoute = (menu) => {
    if (!menu.component) {
        //为空直接跳出
        return null
    }
    let route = {
        name: menu.name,
        path: menu.path,
        meta: {
            icon: menu.icon,
            title: menu.title
        }
    }
    route.component = () => import('@/views/' + menu.component + '.vue')
    return route
}
export default router
